<template>
	<div>
		<div id="ee">
			<form id="ff" enctype="multipart/form-data" action="/zuceApi" method="post" autocomplete="on">
				<fieldset>
					<legend>注册</legend>
					<p>
						<label>请上传可识别脸部特征: </label>
						<input type="file" id="btnFile" name="myfile" accept="image/*" placeholder="请选择头像上传"/>
						<input type="txt" v-model="userName" placeholder="请输入用户名" />
						<input type="txt" v-model="userPassword" placeholder="请输入用户密码" />
						<input type="txt" v-model="nick_name" placeholder="请输入用户昵称" />
						<input type="txt" v-model="user_phone" placeholder="请输入联系方式" />
						<input type="txt" v-model="user_email" placeholder="请输入邮箱地址" />
					</p>
					<p>
						<input type="button" value="注册" @click="uploadBtn">
					</p>
				</fieldset>
			</form>
			<p>
				<router-link class="link-reg" to='/python/faceLogin'>
					<button>去登录页</button>
				</router-link>
			</p>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				userName: '',
				userPassword: '',
				nick_name: '',
				user_phone: '',
				user_email: '',
			}
		},
		methods: {

			uploadBtn() {
				// if (!this.myfile) {
				// 	this.$message.warning('请选择用户头像!')
				// 	return false
				// }
				if (!this.userName) {
					this.$message.warning('请输入姓名!')
					return false
				}
				if (!this.userPassword) {
					this.$message.warning('请输入密码!')
					return false
				}

				if (!this.nick_name) {
					this.$message.warning('请输入用户昵称!')
					return false
				}

				if (!this.user_phone) {
					this.$message.warning('请输入手机号')
					return false
				}

				if (!this.user_email) {
					this.$message.warning('请输入邮箱!')
					return false
				}
			this.btnVal = "正在识别，请稍等。。。"
			var btnFile = document.querySelector('#btnFile');
			console.log(btnFile.files,888889)
			let formData = new FormData();
			formData.append('myfile', btnFile.files[0]);
			formData.append('userName', this.userName);
			formData.append('userPassword', this.userPassword);
			formData.append('nick_name', this.nick_name);
			formData.append('user_phone', this.user_phone);
			formData.append('user_email', this.user_email);
			axios.post('http://39.103.131.74:9999/zuceApi', formData).then(res => {
				if (res.data.code === 200) {
					this.$message.success(res.data.msg);
				} else {
					this.$message.error(res.data.msg);
				}
			})
		}
	}
	}
</script>
<style lang="less" scoped>
	#ee {
		width: 600px;
		margin: 30px auto;

		fieldset {
			width: 400px;
			padding: 20px;
			border: 1px solid #000000;

			legend {
				width: 150px;
			}

			label {
				margin-bottom: 5px;
			}

			p {
				margin-bottom: 10px;

				input {
					height: 40px;
					width: 96%;
					margin-top: 15px;
				}
			}

		}

		.link-reg {
			float: left;
			margin-top: 15px;
		}
	}
</style>
